<template>
  <div>
    <div>
      <el-page-header @back="goBack" content="委托中心"/>
      <br><br>
      <p><font style="font-family: 华文行楷">个人主页</font></p>
    </div>
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item title="个人信息 Information" name="1">
        <div>
          <span><p align="right"><el-button type="primary" icon="el-icon-edit" @click="handleEditStreet">编辑</el-button>
         <el-button type="primary" icon="el-icon-setting" @click="handleSaveStreet">保存</el-button></p></span>
          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="用户名">{{ username }}</el-descriptions-item>
            <el-descriptions-item label="手机号">
              <el-input v-model="inputnumber" :disabled="flag"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="专业班级">
              <el-input v-model="inputmarjor" :disabled="flag"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="寝室号" :span="2">
              <el-input v-model="inputdorm" :disabled="flag"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="年级" :span="2">
              <el-input v-model="inputgrade" :disabled="flag"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="备注">
              <el-tag size="small">学校</el-tag>
              <el-input v-model="inputschool" :disabled="flag"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-collapse-item>
      <el-collapse-item title="  反馈 Feedback" v-show="show1" name="2">
        <div>
          <router-link :to="{name:'FeedBack'}">
            <el-button type="primary">进入反馈</el-button>
          </router-link>
        </div>
      </el-collapse-item>
      <el-collapse-item title="  发布委托 Entrust" name="3">
        <div>
          <el-button type="text" @click="dialogFormVisible = true">发布委托</el-button>

          <el-dialog title="  发布委托" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="委托期限">
                <el-col :span="11">
                  <el-time-picker placeholder="选择时间" v-model="form.endTime" style="width: 100%;"></el-time-picker>
                </el-col>
              </el-form-item>

              <el-row>
                <el-col :span="11">
                  <el-form-item label="地址">
                    <el-input v-model="form.address"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="悬赏">
                    <el-input v-model="form.jg"></el-input>&nbsp;元
                  </el-form-item>
                </el-col>
              </el-row>
              <el-col :span="11">
                <el-form-item label="联系电话">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="委托内容">
                  <el-input
                      type="textarea"
                      :rows="6"
                      placeholder="请输入内容"
                      v-model="form.service">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel()">取 消</el-button>
              <el-button type="primary" @click="publish()">立即发布</el-button>
            </div>
          </el-dialog>
        </div>
      </el-collapse-item>
      <el-collapse-item title="  已发布的委托 Published" name="4">
        <div>
          <el-button type="text" @click="lookwork()">查看已发布委托</el-button>
        </div>
      </el-collapse-item>
      <el-collapse-item title="  已接委托 accepted" name="5">
        <div>
          <el-button type="text" @click="accwork()">已接委托</el-button>
          <el-dialog customClass="customWidth" title="已接委托" :visible.sync="dialogFormVisiblework">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
              <el-table-column
                  prop="time"
                  label="日期"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="id"
                  label="学号"
                  width="80">
              </el-table-column>
              <el-table-column
                  prop="service"
                  label="委托内容">
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="地址">
              </el-table-column>
              <el-table-column
                  prop="phone"
                  label="联系方式"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="endTime"
                  label="期限"
                  width="180"
              >
              </el-table-column>
              <el-table-column
                  label="联系对方"
                  width="120"
              >
                <template slot-scope="scope">
                  <el-button type="text" @click="chat(scope)" class="el-icon-phone">联系对方</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>
        </div>
      </el-collapse-item>
      <el-collapse-item title="  投诉中心 Complaint" v-show="show1" name="6">
        <div>
          <router-link :to="{name:'Complaint'}">
            <el-button>投诉中心</el-button>
          </router-link>
        </div>
      </el-collapse-item>
      <el-collapse-item title="用户注册审核中心  Customer complaint" v-show="show" name="7">
        <br>
        <div>
          <router-link :to="{name:'admincheck'}">
            <el-badge :value="4" class="item">
              <el-button>注册审核</el-button>
            </el-badge>
          </router-link>
        </div>
      </el-collapse-item>
      <el-collapse-item title="  用户投诉反馈处理中心  Customer complaint" v-show="show" name="8">
        <div>
          <router-link :to="{name:'admindispose'}">
            <el-button>投诉反馈处理中心</el-button>
          </router-link>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-button @click="leave()">退出登录</el-button>
    <el-dialog customClass="customWidth" title="已发布的委托" :visible.sync="dialogTableVisible1" large>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="taskId"
            label="委托编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="time"
            label="日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="service"
            label="委托内容"
            width="180">
        </el-table-column>
        <el-table-column
            prop="state"
            label="状态">
        </el-table-column>
        <el-table-column
            prop="acceptid"
            label="接单人id"
        >
        </el-table-column>
        <el-table-column
            prop="accept"
            label="接单人"
        >
        </el-table-column>
        <el-table-column
            prop="phone"
            label="接单人联系方式"
        >
        </el-table-column>
        <el-table-column
            label="联系对方"
            v-show="flag1"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="chat1(scope)" class="el-icon-phone">联系对方</el-button>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="120">
          <template slot-scope="scope">
            <el-button @click="accomplish(scope)" type="success" class="el-icon-finished">完成委托</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>

</template>

<script>
import {addTask, getTask, getUserName, finishTask, userProfile, lookuserProfile} from '../../api/index';

export default {
  data() {
    return {
      status: ['', '未接单', '已被接单', '已完成'],
      username: '',
      tableData: [],
      dialogTableVisible: false,
      dialogFormVisiblework: false,
      dialogFormVisiblework1: false,
      dialogFormVisible: false,
      dialogTableVisible1: false,
      activeName: '0',
      flag: true,
      flag1: true,
      show: false,
      show1: true,
      inputnumber: '',
      inputmarjor: '',
      inputdorm: '',
      inputgrade: '',
      inputschool: '',
      form: {
        "address": "",
        "jg": null,
        "phone": null,
        "service": "",
      }
    };
  },
  // created:function (){
  //    return window.localStorage.getItem("username");
  // },
  methods: {
    goBack() {
      this.$router.push({path: '/MainPage'})
    },
    handleClick(row) {
      console.log(row);
    },
    handleEditStreet() {
      this.flag = false
    },
    handleSaveStreet() {
      this.flag = true,
          this.edit()
    },
    publish() {
      addTask(this.form).then(res => {
        console.log(res)
        if (res.data.code === 100) {
          this.$message({
            type: 'success',
            message: '发布成功'
          })
          this.form.endTime = ''
          this.form.address = ''
          this.form.service = ''
          this.form.jg = ''
          this.form.phone = ''
          this.dialogFormVisible = false;
        }
      })
    },
    accomplish(a) {
      this.row = a.row
      // this.taskid = this.row.taskId,
      finishTask(this.row.taskId).then(res => {
        console.log(res)
      })
    },
    cancel() {
      this.$message({
        type: 'info',
        message: '已取消'
      })
      this.dialogFormVisible = false
    },
    renderTime(date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    lookwork() {
      this.dialogTableVisible1 = true;
      getTask({
        row: 1,
        size: 1000,
        data: {
          'id': window.localStorage.getItem('id')
        }
      }).then(res => {
        console.log(res.data)
        this.tableData = res.data.data.list
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].time = this.renderTime(new Date(this.tableData[i].time).getTime())
          this.tableData[i].state = this.status[this.tableData[i].state]
          this.tableData[i].acceptid = this.tableData[i].accept
          getUserName({id: this.tableData[i].accept}).then(res => {
            this.tableData[i].accept = res.data.data.name
            this.tableData[i].phone = res.data.data.phone
          })
        }
        console.log(this.tableData)
      })
    },
    accwork() {
      this.dialogFormVisiblework = true;
      getTask({
        row: 1,
        size: 1000,
        data: {
          'accept': window.localStorage.getItem('id')
        }
      }).then(res => {
        console.log(res.data)
        this.tableData = res.data.data.list
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].time = this.renderTime(new Date(this.tableData[i].time).getTime())
          this.tableData[i].endTime = this.renderTime(new Date(this.tableData[i].endTime).getTime())
          this.tableData[i].state = this.status[this.tableData[i].state]
          //this.tableData[i].accept=this.getname(this.tableData[i].accept)
          getUserName({id: this.tableData[i].accept}).then(res => {
            this.tableData[i].accept = res.data.data.name
          })
        }
        console.log(this.tableData)
      })
    },
    edit() {
      userProfile({
        id: window.localStorage.getItem('id'),
        phone: this.inputnumber,
        major: this.inputmarjor,
        dorm: this.inputdorm,
        grade: this.inputgrade,
        school: this.inputschool
      }).then(res => {
        console.log(res)
        if (res.data.code === 100) {
          this.$message({
            type: 'success',
            message: '已保存'
          })
        }
      })
    },
    chat(b) {
      this.row = b.row
      console.log(this.row.id)
      this.$router.push({
        path: '/chat',
        name: 'Chat',
        query: {
          id: this.row.id,
          pg:2
        }
      })
    },
    chat1(c) {
      this.row = c.row
      console.log('*' + this.row.acceptid)
      if(this.row.acceptid===0){
        this.$message('该委托还未被接!');
      }else{
        this.$router.push({
          path: '/chat',
          name: 'Chat',
          query: {
            id: this.row.acceptid,
            pg:2
          }
        })
      }
    },
    leave() {
      window.localStorage.clear();
      this.$message('已登出');
      this.$router.push({name: 'Login'})
    }
  },
  created: function () {
    this.username = window.localStorage.getItem("username")
    console.log(window.localStorage.getItem('id'))
    getTask({
      row: 1,
      size: 10000,
      data: {
        'id': window.localStorage.getItem('id')
      }
    }).then(res => {
      console.log(res.data)
      this.tableData = res.data.data.list
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].time = this.renderTime(new Date(this.tableData[i].time).getTime())
        this.tableData[i].state = this.status[this.tableData[i].state]
        //this.tableData[i].accept=this.getname(this.tableData[i].accept)
        getUserName({id: this.tableData[i].accept}).then(res => {
          this.tableData[i].accept = res.data.data.name
          this.tableData[i].phone = res.data.data.phone
        })
        getUserName({id: window.localStorage.getItem('id')}).then(res => {
          console.log(res);
        })
      }
      console.log(this.tableData)
    })
    lookuserProfile(window.localStorage.getItem('id')).then(res => {
      console.log(res)
      this.inputnumber = res.data.data.info.phone
      this.inputgrade = res.data.data.info.grade
      this.inputdorm = res.data.data.info.dorm
      this.inputmarjor = res.data.data.info.major
      this.inputschool = res.data.data.info.school
      console.log(res.data.data.info.phone)
    })
    if (window.localStorage.getItem('id') === '1') {
      this.show = true,
          this.show1 = false;
    }
  }
}
</script>

<style>
.customWidth {
  width: 80%;
}
</style>
